<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>济南名小吃一览</title>
    <!-- 引入高德地图API -->
    <script src="https://webapi.amap.com/maps?v=2.0&key=70c2edf30310a0b8f366860b2e8bf53d"></script>
    <script src="content.js"></script>
    <style>
        /* 设置地图容器的高度和宽度 */
        #map {
            width: 100%;
            height: 100vh;
        }
         
        /* 右上角跳转链接的样式 */
        .top-right-link {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 16px;
            padding: 10px;
            border-radius: 5px;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h2 style="text-align: center;">济南名小吃一览</h2>
    <a href="https://docs.qq.com/sheet/DVWJIZ1NIRnNjZEto?tab=000001" target="_blank" class="top-right-link">查看全部门店</a>
    <div id="map"></div>

    <script>
        // 初始化地图
        const map = new AMap.Map('map', {
            center: [117.0000, 36.6500], // 济南市的中心坐标
            zoom: 13 // 地图缩放级别
        });

        // 添加店铺标记到地图上
        shops.forEach(shop => {
            // 创建一个新的Marker
            const marker = new AMap.Marker({
                position: new AMap.LngLat(shop.lng, shop.lat),
                title: shop.name,
                map: map,
                icon: new AMap.Icon({
                    image: './marker.png', // 确保图片路径正确
                    size: new AMap.Size(24, 24),  // 图标大小
                    imageSize: new AMap.Size(24, 24)  // 图片大小
                })
            });

            // 创建信息窗口
            const infoWindow = new AMap.InfoWindow({
                content: `<h3>${shop.name}</h3><p>地址：${shop.address}</p><p>消费：${shop.cost}</p>`,
                offset: new AMap.Pixel(0, -30) // 信息窗口相对于标记的位置
            });

            // 鼠标点击标记时，打开信息窗口
            marker.on('click', () => {
                infoWindow.open(map, marker.getPosition());
            });
        });
    </script>
</body>
</html>
